import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';

import 'package:shop/models/swiper_data.dart';
import 'package:shop/views/photo_view.dart';

class BannerView extends StatefulWidget {
  final double height;
  final List<BannerInfo> bannerList;
  const BannerView({super.key, required this.bannerList, required this.height});

  @override
  State<BannerView> createState() => _BannerViewState();
}

class _BannerViewState extends State<BannerView> {
  var _current = 0;
  final CarouselSliderController _controller = CarouselSliderController();

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        CarouselSlider(
          options: CarouselOptions(
            viewportFraction: 1,
            autoPlay: true,
            height: widget.height,
            onPageChanged: (index, reason) {
              setState(() {
                _current = index;
              });
            },
          ),
          carouselController: _controller,
          items: widget.bannerList.map(
            (value) {
              final imageUrl =
                  (value.imageSrc ?? '').replaceAll('https', 'http');
              return GestureDetector(
                child: SizedBox(
                  width: MediaQuery.of(context).size.width,
                  child: CachedNetworkImage(
                    imageUrl: imageUrl,
                    fit: BoxFit.cover,
                  ),
                ),
                onTap: () {
                  Navigator.push(context, MaterialPageRoute(
                    builder: (context) {
                      final items = widget.bannerList.map(
                        (e) {
                          final imageUrl =
                              (e.imageSrc ?? '').replaceAll('https', 'http');
                          return GalleryItem(
                              id: '${e.goodsId}', resource: imageUrl);
                        },
                      ).toList();
                      return PhotoView(
                        galleryItems: items,
                        initialIndex: _current,
                        backgroundDecoration: const BoxDecoration(
                          color: Colors.black,
                        ),
                      );
                    },
                  ));
                },
              );
            },
          ).toList(),
        ),
        Column(
          children: [
            SizedBox(
              height: widget.height - 30,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: widget.bannerList.asMap().entries.map((entry) {
                return GestureDetector(
                  onTap: () => _controller.animateToPage(entry.key),
                  child: Container(
                    width: 10.0,
                    height: 10.0,
                    margin:
                        EdgeInsets.symmetric(vertical: 8.0, horizontal: 4.0),
                    decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: (Theme.of(context).brightness == Brightness.dark
                                ? Colors.white
                                : Colors.black)
                            .withAlpha(_current == entry.key ? 230 : 100)),
                  ),
                );
              }).toList(),
            )
          ],
        ),
      ],
    );
  }
}
